<template>
  <div class="goods">
    <div class="search">
      <div class="search-top">
        <span @click="goback(-1)">
          <van-icon name="arrow-left" size="0.2rem" color="#c9b078" />
        </span>
        <form action="/" class="search-form">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
      </div>
      <div class="sort">
        <div
          :class="tabIndex === 1 ? 'active' : 'noActive'"
          @click="clickHandle(1)"
        >
          综合
        </div>
        <div
          @click="clickHandle(2)"
          :class="tabIndex === 2 ? 'active' : 'noActive'"
        >
          销量
        </div>
        <div class="sort-price">
          <div
            @click="clickHandle(3)"
            :class="tabIndex === 3 ? 'active' : 'noActive'"
          >
            价格
          </div>
          <div class="price">
            <div
              :class="
                tabIndex === 3 && priceSort === true ? 'active' : 'noActive'
              "
            >
              <van-icon name="arrow-up" size="12px" />
            </div>
            <div
              :class="
                tabIndex === 3 && priceSort === false ? 'active' : 'noActive'
              "
            >
              <van-icon name="arrow-down" size="12px" />
            </div>
          </div>
        </div>
        <div
          @click="clickHandle(4)"
          :class="tabIndex === 4 ? 'active' : 'noActive'"
        >
          上新
        </div>
      </div>
    </div>

    <div class="goods-list">
      <div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <GoodItem :goodslist="goodslist"></GoodItem>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { getGoodsList } from "@/api/goods.js";
import { Search, Toast, Sticky, Icon, CellGroup } from "vant";

Vue.use(Search);
Vue.use(Sticky);
Vue.use(Icon);
import GoodItem from "components/goods/GoodItem.vue";
export default {
  data() {
    return {
      value: "",
      goodslist: [],
      tabIndex: 1,
      priceSort: true,

      loading: false,
      finished: false,
    };
  },
  components: {
    GoodItem,
  },
  created() {
      this.start =0
      this.pagesize = 6
    let query = this.$route.query;
    if (JSON.stringify(query) !== '{}') {
      this.getGoods(query);
    } else {
        console.log(0);
      this.getGoods({
          _start:this.pagesize*this.start,
          _limit:this.pagesize
      });
    }
  },
  computed: {},
  methods: {
    onSearch(val) {
        this.goodslist=[]
      this.getGoods({
        title_like: val,
      });
    },
    onCancel() {
        this.goodslist=[]
      this.getGoods({});
    },
    async getGoods(params) {
        console.log(params);
      let rs = await getGoodsList(params);
      this.goodslist = [
          ...this.goodslist,
          ...rs.data
      ];
    },
    //点击排序
    clickHandle(val) {
      switch (val) {
        case 1:
          this.tabIndex = 1;
          this.goodslist=[]
          this.getGoods({});
          break;
        case 2:
          this.tabIndex = 2;
          this.goodslist=[]
          this.getGoods({
            _sort: "sales",
            _order: "desc",
          });
          break;
        case 3:
          this.tabIndex = 3;
        this.goodslist=[]
          this.priceSort = !this.priceSort;
          if (this.priceSort) {
            this.getGoods({
              _sort: "marketPrice",
              _order: "asc",
            });
          } else {
            this.getGoods({
              _sort: "marketPrice",
              _order: "desc",
            });
          }
          break;
        case 4:
          this.tabIndex = 4;
          this.goodslist=[]
          this.getGoods({
            _sort: "newgoods",
            _order: "desc",
          });
          break;
      }
    },

    goback() {
      this.$router.go(-1);
    },

     onLoad() {
         this.loading = false
         this.start++
          this.getGoods({
          _start:this.pagesize*this.start,
          _limit:this.pagesize
      });
      console.log(this.goodslist.length,this.start,this.pagesize);
        if(this.goodslist.length <this.start*this.pagesize){
             this.finished = true
             return
         }
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~assets/border.styl'
    .goods
        background #f7f8fa
        position relative
        height calc(100vh - 1rem)
        .search
            background #fff
            z-index 999
            width 100%
            position fixed
            top 0
        .search-top
            display flex
            align-items center
            justify-content space-around
            span
                vertical-align sub
                width .3rem
                text-align right
            .search-form
                flex 1
        .sort
            display flex
            align-items center
            justify-content center
            height .44rem
            background #fff
            $border(1px 0 0 0, #eee)
            div
                flex 1
                text-align center
            .sort-price
                display flex
                align-items center
                .price
                    text-align left
        .goods-list
            margin-top .95rem
            background #f7f8fa
            
.active
    color #c9b078
.noActive
    color #000
</style>
